import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';

// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
class EchartsTest extends Component {

  componentDidMount() {
    const bar = echarts.init(document.getElementById("t2"));
    const pie = echarts.init(document.getElementById("t1"));
    const weatherIcons = {
      'Sunny': 'http://192.168.132.180/group1/M00/00/00/wKiEtF0en7KATd6rAABjPHHdeKo055.png',
      'Cloudy': 'http://192.168.132.180/group1/M00/00/00/wKiEtF0en7uADrgvAABBXnQ6cI0641.png',
      'Showers': 'http://192.168.132.180/group1/M00/00/00/wKiEtF0en7iAfbHmAABvSyf7b9k818.png'
    };

    const seriesLabel = {
      normal: {
        show: true,
        textBorderColor: '#333',
        textBorderWidth: 2
      }
    }

    pie.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
      },
      series: [
        {
          name:'访问来源',
          type:'pie',
          selectedMode: 'single',
          radius: [0, '30%'],

          label: {
            normal: {
              position: 'inner'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:[
            {value:335, name:'直达', selected:true},
            {value:679, name:'营销广告'},
            {value:1548, name:'搜索引擎'}
          ]
        },
        {
          name:'访问来源',
          type:'pie',
          radius: ['40%', '55%'],
          label: {
            normal: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            }
          },
          data:[
            {value:335, name:'直达'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1048, name:'百度'},
            {value:251, name:'谷歌'},
            {value:147, name:'必应'},
            {value:102, name:'其他'}
          ]
        }
      ]
    })

    bar.setOption({
      title: {
        text: 'Wheater Statistics'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['City Alpha', 'City Beta', 'City Gamma']
      },
      grid: {
        left: 100
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        name: 'Days',
        axisLabel: {
          formatter: '{value}'
        }
      },
      yAxis: {
        type: 'category',
        inverse: true,
        data: ['Sunny', 'Cloudy', 'Showers'],
        axisLabel: {
          formatter: function (value) {
            return '{' + value + '| }\n{value|' + value + '}';
          },
          margin: 20,
          rich: {
            value: {
              lineHeight: 30,
              align: 'center'
            },
            Sunny: {
              height: 40,
              align: 'center',
              backgroundColor: {
                image: weatherIcons.Sunny
              }
            },
            Cloudy: {
              height: 40,
              align: 'center',
              backgroundColor: {
                image: weatherIcons.Cloudy
              }
            },
            Showers: {
              height: 40,
              align: 'center',
              backgroundColor: {
                image: weatherIcons.Showers
              }
            }
          }
        }
      },
      series: [
        {
          name: 'City Alpha',
          type: 'bar',
          data: [165, 170, 30],
          label: seriesLabel,
          markPoint: {
            symbolSize: 1,
            symbolOffset: [0, '50%'],
            label: {
              normal: {
                formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                backgroundColor: 'rgb(242,242,242)',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                padding: [4, 10],
                lineHeight: 26,
                // shadowBlur: 5,
                // shadowColor: '#000',
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
                position: 'right',
                distance: 20,
                rich: {
                  a: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 18,
                    textShadowBlur: 2,
                    textShadowColor: '#000',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 1,
                    textBorderColor: '#333',
                    textBorderWidth: 2
                  },
                  b: {
                    color: '#333'
                  },
                  c: {
                    color: '#ff8811',
                    textBorderColor: '#000',
                    textBorderWidth: 1,
                    fontSize: 22
                  }
                }
              }
            },
            data: [
              {type: 'max', name: 'max days: '},
              {type: 'min', name: 'min days: '}
            ]
          }
        },
        {
          name: 'City Beta',
          type: 'bar',
          label: seriesLabel,
          data: [150, 105, 110]
        },
        {
          name: 'City Gamma',
          type: 'bar',
          label: seriesLabel,
          data: [220, 82, 63]
        }
      ]
    })
  }
  render() {
    return (
      <div>
        <div id="t1" style={{ width: 800, height: 600 }}></div>
        <div id="t2" style={{ width: 800, height: 600 }}></div>
      </div>
    );
  }
}

export default EchartsTest;
